const qilian_list = {
    props: ['flushsignal'],
    template: `
<div class="wrap">
    <div 
    class="list"
    v-show="whichShow==0">
        <div 
        class="list-item"
        v-for="(list, index) in lists"
        :key="list.id">
            <div class="list-item-left">
                <div class="list-item-info">
                    <span class="num-style">{{index}}</span>
                    <span class="title-style">{{list.name}}</span>
                    <span>|</span>
                    <span>{{list.type==0?'显示':'隐藏'}}</span>
                    <span>|</span>
                    <span>序列号：{{list.id}}</span>
                    <span>|</span>
                    <span>缩略名：{{list.slug}}</span>
                    <span>|</span>
                    <span>创建者：{{list.user_name}}</span>
                </div>
                <div class="list-item-desc" v-html="list.description">简介：{{list.description}}</div>
            </div>
            <div class="list-item-right">
                <button 
                class="button-hover button-secondary"
                @click="listClick(list.id)"
                >查看{{list.content.length}}篇</button>
                <button 
                class="button-hover button-warning" 
                @click="openPannel(1, index)"
                >修改</button>
                <button 
                class="button-hover button-error" 
                @click="deleteList(index)"
                >删除</button>
            </div>
        </div>
    </div>

    <div 
    class="pannel" 
    v-show="whichShow==1">
        <div class="pannel-each" v-show="whichPannel==0">
            <qilian-tip type="red" right="2rem" bottom="2rem">{{addMsg}}</qilian-tip>
            <div class="pannel-close">
                <div class="add-form-title">添加分类</div>
                <button 
                class="pannel-close-item button-hover button-primary"
                @click="closePannel">取消添加</button>
            </div>
            <div class="add-form">
                <form class="add-form-main" @submit.prevent="addList">
                    <div class="add-form-item">
                        <input 
                        type="text" 
                        v-model.trim="name"
                        @input="getJP"
                        placeholder="请输入分类名" 
                        autocomplete="off"
                        required="required">
                    </div>
                    <div class="add-form-item">
                        <input 
                        type="text" 
                        v-model.trim="slug" 
                        placeholder="请输入缩略名" 
                        autocomplete="off"
                        required="require">
                    </div>
                    <div class="add-form-item list-select">
                        <div class="list-select-item">
                          <input type="radio" id="type1" value="0" v-model="picked">
                          <label for="type1">显示</label>
                        </div>
                        <div class="list-select-item">
                          <input type="radio" id="type2" value="1" v-model="picked">
                          <label for="type2">隐藏</label>     
                        </div>              
                    </div>
                    <div class="add-form-item">
                        <textarea 
                        v-model.trim="description" 
                        cols="30" 
                        rows="10"></textarea>
                    </div>
                    <div class="add-form-item">
                        <button 
                        class="button-primary button-hover"
                        type="submit"
                        >提交</button>
                    </div>             
                </form>
            </div>
        </div>

        <div class="pannel-each" v-show="whichPannel==1">
            <qilian-tip type="red" right="2rem" bottom="2rem">{{updateMsg}}</qilian-tip>
            <div class="pannel-close">
                <div class="add-form-title">修改</div>
                <button 
                class="pannel-close-item button-hover button-primary"
                @click="closePannel">取消修改</button>
            </div>
            <div class="add-form">
                <form class="add-form-main" @submit.prevent="updateList">
                    <div class="add-form-item">
                        <input 
                        type="text" 
                        v-model.trim="mName" 
                        @input="getMJP"
                        placeholder="请输入分类名" 
                        autocomplete="off">
                    </div>
                    <div class="add-form-item">
                        <input 
                        type="text" 
                        v-model.trim="mSlug" 
                        placeholder="请输入缩略名" 
                        autocomplete="off">
                    </div>
                    <div class="add-form-item list-select">
                        <div class="list-select-item">
                          <input type="radio" id="mType1" value="0" v-model="mPicked">
                          <label for="mType1">显示</label>
                        </div>
                        <div class="list-select-item">
                          <input type="radio" id="mType2" value="1" v-model="mPicked">
                          <label for="mType2">隐藏</label>     
                        </div>              
                    </div>
                    <div class="add-form-item">
                        <textarea 
                        v-model.trim="mDescription" 
                        cols="30" 
                        rows="10"></textarea>
                    </div>                  
                    <div class="add-form-item">
                        <button 
                        class="button-primary button-hover"
                        type="submit"
                        >提交</button>
                    </div>                
                </form>
            </div>
        </div>
    </div>

    <button 
    class="list-add button-primary"
    @click="openPannel(0)"
    v-show="whichShow==0">添加分类</button>
</div>
    `,
    data: function() {
        return {
            userinfo: {},

            whichShow: 0,
            whichPannel: 0,

            addMsg: '请添加分类',
            updateMsg: '请填入信息',

            name: '',
            slug: '',
            description: '分类简介',
            picked: 0,

            mName: '',
            mSlug: '',
            mDescription: '分类简介',
            mPicked: 0,

            index: 0,

            lists: []
        }
    },
    created: function() {
        this.userinfo = JSON.parse(localStorage.getItem('userinfo'));
        this.$options.methods.getList(this);
    },
    watch: {
        flushsignal: function(newVal, oldVal) {
            this.$options.methods.getList(this);
        }
    },
    methods: {
        listClick: function(id) {
            this.$emit("list-click", id);
        },
        openPannel: function(whichPannel, index) {
            this.whichShow = 1;
            this.whichPannel = whichPannel;
            if (this.whichPannel == 1) {
                this.index = index;
                this.mName = this.lists[index].name,
                this.mSlug = this.lists[index].slug,
                this.mDescription = this.lists[index].description
                this.mPicked = this.lists[index].type;
            }
        },
        closePannel: function() {
            this.whichShow = 0;
        },
        getJP: function(e) {
            this.slug = Pinyin.GetJP(this.name);
        },
        getMJP: function(e) {
            this.mSlug = Pinyin.GetJP(this.mName);
        },
        getList: function(that) {
            axios.get(that.$host + 'getList.php', {
                    params: { 'belong': 'order' }
                })
                .then(function(response) {
                    if (parseInt(response.data.code) == 0) {
                        that.lists = response.data.data;
                    }
                }).catch(function(err) {
                    console.log(err);
                });
        },
        addList: function() {
            if (this.name == '') {
                this.addMsg = '名称不得为空';
                return;
            }
            if (this.slug == '') {
                this.addMsg = '缩略名不得为空';
                return;
            }
            if (this.description == '') {
                this.addMsg = '简介不得为空';
                return;
            }
            if (this.picked != 0 && this.picked != 1) {
                this.addMsg = '显示隐藏参数有误';
                return;
            }
            axios({
                method: 'post',
                url: this.$host + 'addList.php',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                data: Qs.stringify({
                    name: this.name,
                    slug: this.slug,
                    description: this.description,
                    type: this.picked
                })
            }).then(response => {
                if (response.data.code == 0) {
                    this.lists.unshift(response.data.data);
                    this.addMsg = `分类${response.data.data.name}添加成功`;
                    this.$options.methods.closePannel.apply(this);
                    location.reload();
                } else {
                    this.addMsg = response.data.msg;
                }
            }).catch(err => {
                console.log(err);
            });
        },
        deleteList: function(index) {
            if (confirm(`是否要删除分类[${this.lists[index].name}]？`)) {
                if (prompt("输入DELETE再次确认删除", "") == "DELETE") {
                    axios({
                        method: 'post',
                        url: this.$host + 'delList.php',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        },
                        data: Qs.stringify({
                            id: this.lists[index].id
                        })
                    }).then(response => {
                        if (response.data.code == 0) {
                            this.lists.splice(index, 1);
                            location.reload();
                        } else {
                            alert(`${this.lists[index].name}删除失败：${response.data.msg}`);
                        }
                    }).catch(err => {
                        console.log(err);
                    });
                }else {
                    alert("未正确输入，未删除");
                }
            }
        },
        updateList: function() {
            const index = this.index;
            if (this.mName == '') {
                this.updateMsg = '名称不得为空';
                return;
            }
            if (this.mSlug == '') {
                this.updateMsg = '缩略名不得为空';
                return;
            }
            if (this.mDescription == '') {
                this.updateMsg = '简介不得为空';
                return;
            }
            if (parseInt(this.mPicked) != 0 && parseInt(this.mPicked) != 1) {
                this.updateMsg = '显示隐藏参数有误';
                return;
            }
            axios({
                method: 'post',
                url: this.$host + 'updateList.php',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                data: Qs.stringify({
                    id: this.lists[index].id,
                    name: this.mName,
                    slug: this.mSlug,
                    description: this.mDescription,
                    type: parseInt(this.mPicked)
                })
            }).then(response => {
                if (response.data.code == 0) {
                    this.lists[index] = response.data.data;
                    this.updateMsg = `分类${response.data.data.name}修改成功`;
                    this.$options.methods.closePannel.apply(this);
                } else {
                    this.updateMsg = response.data.msg;
                }
            }).catch(err => {
                console.log(err);
            });
        }
    }
}